<template>
  <div class="content">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="30"
      shapeType="circle"
      :particleSize="1"
      linesColor="#f2f2f2"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    ></vue-particles>
    <div class="container">
      <div class="form-box1">
        <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
          <el-tab-pane :label="$t('message.registered')" name="first">
            <el-form class="form" :model="form" ref="form" :rules="rules" label-position="left">
              <el-form-item prop="input3" label>
                <p>
                  <el-input
                    :placeholder="$t('message.cell')"
                    v-model="form.input3"
                    style="width: 100%;"
                    class="input-with-select"
                  ></el-input>
                </p>
              </el-form-item>

              <el-form-item prop="Verification3" label>
                <div style>
                  <el-input
                    :placeholder="$t('message.getthe')"
                    v-model="form.Verification3"
                    class="input-with-select"
                  >
                    <el-button
                      v-show="show"
                      @click="getCode"
                      slot="append"
                      type="primary"
                    >{{$t('message.Getcode')}}</el-button>
                    <el-button
                      v-show="!show"
                      slot="append"
                      type="primary"
                    >{{count}} s{{$t('message.Try')}}</el-button>
                  </el-input>
                </div>
              </el-form-item>

              <el-form-item prop="password" label>
                <el-input
                  type="password"
                  v-model="form.password"
                  :placeholder="$t('message.enterpassword')"
                ></el-input>
                <p class="size">{{$t('message.English')}}</p>
              </el-form-item>
              <el-form-item prop="confirmPwd" label>
                <el-input type="text" v-model="form.nickname" placeholder="请输入真实姓名"></el-input>
              </el-form-item>
              <el-form-item prop="inviteCode" label>
                <el-input v-model="form.inviteCode" :placeholder="$t('message.invitation')"></el-input>
              </el-form-item>
              <el-button
                class="btn-block mt-60"
                type="success"
                @click="confirm('phone')"
                style="background:#6881FF!important;"
                size="large"
              >{{$t('message.submit')}}</el-button>
            </el-form>

          </el-tab-pane>
          <a class="Agreement" href="https://www.dupont-ex.com/pdf/userAgreement.pdf">《用户协议》</a>
          <!-- <a href="../"></a> -->
        </el-tabs>
      </div>
      
    </div>
    
  </div>
</template>

<script>
import { Country, registe, sendCode, getvcode, registAdd } from "../api/api";
import qs from "qs";
import { debug, debuglog } from "util";
export default {
  data() {
    return {
      show: true,
      count: "",
      timer: null,

      // showEmail: true,
      countEmail: "",
      timerEmail: null,
      recommendType: 0,
      activeName: "first",
      input4: "",
      selectEmail: "",

      CountryLists: [],
      form: {
        account: "",
        code: "",
        inviteCode: "",
        password: "",
        nickname: "",
        input3: "",
        Verification3: "",
        select: "",
        id: "86",
        idcode:""
      },

      rules: {
        input3: [
          {
            required: true,
            message: this.$t("message.cell"),
            trigger: "blur"
          },
          {
            validator: (rule, value, cb) => {
              if (value.indexOf("@") !== -1) {
                if (
                  !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)
                ) {
                  cb(new Error(this.$t("message.byemail")));
                }
              } else {
                if (!/^\d{11}$/.test(value)) {
                  cb(new Error(this.$t("message.modify")));
                }
              }
              cb();
            },
            trigger: "blur"
          }
        ],
        // Verification3: [
        //   {
        //     required: true,
        //     message: this.$t('message.enterty'),
        //     trigger: "blur"
        //   },
        //   {
        //     validator: (rule, value, cb) => {
        //       if (!/^\d{5}$/.test(value)) {
        //         cb(new Error(this.$t('message.correctly')));
        //       }
        //       cb();
        //     },
        //     trigger: "blur"
        //   }
        // ],
        password: [
          {
            required: true,
            message: this.$t("message.letters"),
            trigger: "blur"
          },
          {
            validator: (rule, value, cb) => {
              cb();
            },
            trigger: "blur"
          }
        ],

        inviteCode: [
          {
            required: true,
            message: this.$t("message.codeinvite"),
            trigger: "blur"
          },
          {
            validator: (rule, value, cb) => {
              cb();
            },
            trigger: "blur"
          }
        ]
      },
      rulesEmill: {
        input4: [
          {
            required: true,
            message: this.$t("message.enteremail"),
            trigger: "blur"
          },
          {
            validator: (rule, value, cb) => {
              if (value.indexOf("@") !== -1) {
                if (
                  !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)
                ) {
                  cb(new Error(this.$t("message.wrong")));
                }
              } else {
                if (!/^\d{11}$/.test(value)) {
                  cb(new Error(this.$t("messgae.with")));
                }
              }
              cb();
            },
            trigger: "blur"
          }
        ],

        password: [
          {
            required: true,
            message: this.$t("message.letters"),
            trigger: "blur"
          },
          {
            validator: (rule, value, cb) => {
              cb();
            },
            trigger: "blur"
          }
        ],
        nickname: [
          {
            required: true,
            message: this.$t("message.reconfirm"),
            trigger: "blur"
          }
        ],
        inviteCode: [
          {
            required: true,
            message: this.$t("message.codeinvite"),
            trigger: "blur"
          },
          {
            validator: (rule, value, cb) => {
              cb();
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    
    CountryList() {
      var CountryList = [
        {
          phoneCode: "86",
          name: this.$t("message.china")
        }
      ];
      return CountryList;
    },

    year() {
      let date = new Date();
      let year = date.getFullYear();
      return year;
    },
    lang() {
      return window.localStorage.getItem("lang");
    }
  },
  mounted() {},
  methods: {
    MathRand() {
      var Num = "";
      for (var i = 0; i < 6; i++) {
        Num += Math.floor(Math.random() * 10);
      }
      this.idcode =  Num
    },
    init() {
      if ((this.$route.query.recommendType = 1)) {
        this.recommendType = 1;
      }
    },
    getCode() {
      this.MathRand()
     
      if (this.form.input3 == "") {
        this.$message.error(this.$t("message.telephone"));
        return false;
      } else if (!/^\d{11}$/.test(this.form.input3)) {
        this.$message.error(this.$t("message.modify"));
        return false;
      }
      // 自动生成验证码
      var TIME_COUNT = 60;
      let data = {
        guid: this.$allId.guid,
        mobile: this.form.input3,
        code: this.idcode
      };

      getvcode(data).then(res => {
        if (res.data.ResultCD == "I001") {
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;

            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          this.$message.error(res.data.ErrorMsg);
        }
      });
    },

    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
           if(this.idcode !== this.form.Verification3){
                this.$message.error("请输入正确验证码！");
                return false
          }
          let data = {
            guid: this.$allId.guid,
            mobile: this.form.input3,
            vcode: this.form.Verification3,
            hashedPassword: this.$md5(this.form.password),
            nickname: this.form.nickname,
            companyCode: this.form.inviteCode
            // companyCode: "Y0003"
          };
          registAdd(data).then(res => {
            if (res.data.ResultCD == "I001") {
              
              this.$message({
                message: this.$t("message.loginnow"),
                type: "success"
              });
              this.$router.push({ path: "/login" });
            } else {
              this.$message.error(res.data.ErrorMsg);
            }
          });
        }
      });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  watch: {}
};
</script>

<style scoped>
@import "../assets/css/var.css";
.container {
  /* background-color: #fff; */
  margin: 20px auto 30px;
  margin-top: 150px;
}
.form-box1 {
  position: relative;
  border: 1px solid #ddd;
  background: #fff;
  padding: 30px;
  border-radius: 15px;
}
.Agreement {
  line-height: 30px;
  font-weight: 700;
  color: rgba(104, 129, 255, 1)
}
.size {
  font-size: 10px;
  color: #999;
  line-height: 28px;
  /* transform: scale(0.8); */
}
.lizi {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
   background: #1a273a;
}
.protocol-line {
  margin-top: 25px;
  padding-bottom: 115px;
  position: relative;
  border-top: 1px solid #ddd;
  /* & .protocol {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    color: #1687ee;
    padding: 0 13px;
    background-color: #fff;
  } */
}

.copyright {
  text-align: center;
  padding-bottom: 30px;
}
</style>
